<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="form" :model="search" :inline="true">
        <el-form-item label="订单编号：">
          <el-input
            v-model="search.orderNo"
            clearable
            placeholder="请输入订单编号"
            size="medium"
          />
        </el-form-item>
        <el-form-item label="选择日期：">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            class="my-primary1"
            icon="el-icon-search"
            @click="query"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暂无数据"
        fit
        highlight-current-row
        :cell-style="{
          height: '44px',
          padding: '2px 0px',
          textAlign: 'left',
          color: 'rgb(102, 102, 102)',
          borderBottom: 'none',
        }"
        :header-cell-style="{
          lineHeight: 1.15,
          padding: '10px 0px 9px',
          background: 'rgb(243, 246, 251)',
          fontWeight: 500,
          textAlign: 'left',
          color: 'rgb(102, 102, 102)',
          borderBottom: 'none',
        }"
      >
        <el-table-column
          type="index"
          :index="(index) => (search.pageIndex - 1) * 10 + (index + 1)"
          label="序号"
          width="80px"
        />
        <el-table-column label="订单编号" prop="orderNo" />
        <el-table-column label="商品名称" prop="skuName" />
        <el-table-column label="订单金额(元)">
          <template v-slot="{ row }">
            {{ row.amount / 100 }}
          </template>
        </el-table-column>
        <el-table-column label="设备编号" prop="innerCode" />
        <el-table-column label="订单状态" prop="status">
          <template v-slot="{ row }">
            {{ status[row.status] }}
          </template>
        </el-table-column>
        <el-table-column label="订单日期" prop="updateTime" width="160">
          <template v-slot="{ row }">
            {{ row.updateTime.replace("T", " ").replaceAll("-", ".") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template v-slot="{ row }">
            <el-button
              type="text"
              class="el-button--primary-text"
              @click.native="showOrderInfo(row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          layout="slot,prev,next"
          :current-page.sync="search.pageIndex"
          :total="totalCount"
          :page-size="search.pageSize"
          prev-text="上一页"
          next-text="下一页"
          @current-change="orderSearch"
        >
          <template order="-1">
            <span
              class="el-pagination__total"
            >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
              totalPage
            }}
              页</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="订单详情"
      :visible.sync="orderInfoDialog"
      width="630px"
      @close="orderInfoClose"
    >
      <div class="order-status">
        <img
          src=""
          class="icon"
        >
        <span class="status">出货成功</span>
        <img src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" class="pic">
      </div>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号：">{{ current.orderNo }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称：">{{ current.skuName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额：">{{ current.price/100 }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号：">{{ current.innerCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">{{ current.createTime?.replace("T", " ").replaceAll("-", ".") }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间：">{{ current.updateTime?.replace("T", " ").replaceAll("-", ".") }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式：">{{ payType[current.payType] }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备地址：">{{ current.addr?.substring(current.addr.lastIndexOf('-')+1) }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { searchOrderList } from '@/api/order'
export default {
  data() {
    return {
      search: {
        orderNo: '',
        startDate: '',
        endDate: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      totalCount: 0,
      totalPage: 0,
      orderInfoDialog: false,
      status: {
        0: '创建',
        1: '支付完成',
        2: '出货成功',
        3: '出货失败'
      },
      payType: {
        '1': '支付宝',
        '2': '微信'
      },
      current: {}
    }
  },
  computed: {
    date: {
      get() {
        return [this.search.startDate, this.search.endDate]
      },
      set(value) {
        if (value) {
          this.search.startDate = value[0]
          this.search.endDate = value[1]
        } else {
          this.search.startDate = ''
          this.search.endDate = ''
        }
      }
    }
  },
  async created() {
    this.orderSearch()
  },
  methods: {
    query() {
      this.search.pageIndex = 1
      this.orderSearch()
    },
    async orderSearch() {
      const { currentPageRecords, totalCount, totalPage } =
        await searchOrderList({
          ...this.search
        })
      this.totalCount = parseInt(totalCount)
      this.totalPage = totalPage
      this.tableData = currentPageRecords
    },
    formattedDate(date) {
      const currentDate = new Date(date)
      const year = currentDate.getFullYear()
      const month = ('0' + (currentDate.getMonth() + 1)).slice(-2)
      const day = ('0' + currentDate.getDate()).slice(-2)
      const hours = ('0' + currentDate.getHours()).slice(-2)
      const minutes = ('0' + currentDate.getMinutes()).slice(-2)
      const seconds = ('0' + currentDate.getSeconds()).slice(-2)
      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
    },
    async showOrderInfo(row) {
      this.orderInfoDialog = true
      this.current = row
    },
    orderInfoClose() {
      this.orderInfoDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";
.order-status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 54px;
    margin-bottom: 30px;
    background-color: hsla(0,0%,92.5%,.39)
}

.order-status .icon {
    margin-left: 22px
}

.order-status .status {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 16px;
    color: rgba(0,0,0,.85)
}

.order-status .pic {
    margin-right: 76px;
    margin-bottom: 7px
}

.addr {
    margin-top: 10px;
    line-height: 20px
}
</style>
